<template>
	<view>
		<view class="bigbox">
			<view class="fot1">征信审批</view>
			<view class="box1">
				<view>
					<view class="fot3">基础信息（必填）</view>
				</view>
				<!-- <view class="g_fot1">订单编号：HC2020030001</view> -->
			</view>
			<view class="box2">
				<view>客户姓名</view>
				{{dat_arr.query03}}
			</view>
			<!-- <view class="box2">
				<view>申请金额</view>
				<input type="text" placeholder="请输入">
			</view> -->
			<view class="box2">
				<view>客户评分</view>
				<input type="text" v-model="a1" placeholder="请输入">
			</view>
			
			<view class="box2">
				<view>预审批状态</view>
				<picker @change="bindPickerChange" :value="index" :range="zhuangtai1">
					<view class="uni-input">{{zhuangtai1[index]}}</view>
				</picker>
			</view>
			<view class="w_fot1 w_fot2">
				<view>好车贷评分表</view>
				<view class="w_fot2">
					<view class="w_fot3 w_fot4" @click="bj_sta=true">编辑</view>
					<view class="w_fot4" @click="bj_sta=false">确认</view>
				</view>
			</view>
			<view class="box4">
				<view @click="uploading(index)" v-for="(item,index) in pinfen">
					<image :src="item" mode="" class="active_img"></image>
					<view :class="pinfen.length-1 != index?'zhezhao':'zhezhao1'" @click="shan(item,index)" v-if="bj_sta">
						<image class="" src="../../static/83.png"></image>
					</view>
				</view>
			</view>
			<view class="w_fot1">备注理由：</view>
			<textarea placeholder="请输入备注" v-model="a3"/>
			<view class="box3">
				<view class="box3_1" @click="tz(1)">保存</view>
				<view class="box3_2" @click="tz(2)">提交</view>
			</view>
		</view>
		<tanchuang 
		 :dspSta=zhuangtai1[index] v-if="tc_tijiao" 
		 @tcnr="tanchuaung_nr"
		 @tcgb="tanchuaung_gb"></tanchuang>
	</view>
</template>

<script>
	import tanchuang from '../../component/tanchuang.vue'
	export default {
		data() {
			return {
				tc_tijiao:false,
				bj_sta:false,
				a1:'',
				a2:'',
				a3:'',
				status:0,
				index: 0,
				dat_arr:{},
				zhuangtai:[],
				zhuangtai1:[],
				pinfen:['../../static/80.png'],
				img:'../../static/80.png'
			}
		},
		components:{tanchuang},
		onLoad:function(option) {
			this.dat_arr = JSON.parse(option.item)
			console.log(this.dat_arr)
			this.shujuType('yspzt')
		},
		methods: {
			// 删除
			shan:function(item,i){
				console.log(item)
				uni.showModal({
				title: '提示',
				content: '确认删除该图片？',
				success: (res) => {
					let arr = []
					if (res.confirm) {
						this.pinfen.forEach((item1)=>{
							if(item != item1){
								console.log(item1,111111)
								arr.push(item1)
							}
						})
						this.pinfen = arr
						
						
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				},
				})
			},
			uploading:function(index){
				if(!this.bj_sta){
					console.log(index)
					uni.chooseImage({
					    success: (chooseImageRes) => {
					        const tempFilePaths = chooseImageRes.tempFilePaths;
							this.img = tempFilePaths[0]
					        uni.uploadFile({
					            url: this.$headUrl + 'sys/common/upload',
					            filePath: tempFilePaths[0],
					            name: 'file',
								header:{
									'X-Access-Token': uni.getStorageSync('token')
								},
					            success: (res) => {
									console.log(JSON.parse(res.data))
									if(JSON.parse(res.data).success){
										if(this.pinfen[0] == '../../static/80.png'){
											this.pinfen = this.pinfen.splice(1.1)
										}
										this.pinfen[index] = JSON.parse(res.data).message
										this.pinfen.push('../../static/80.png')
										console.log(this.pinfen)
									}
									
					            }
					        });
					    }
					});
				}
			},
			shujuType:function(type){
				this.$get('sys/dict/getDictItems/' + type).then((item)=>{
					console.log(item.data.result)
					if(type == 'yspzt'){//预审批状态
						console.log(item.data.result)
						this.zhuangtai = item.data.result
						item.data.result.forEach((item,index)=>{
							this.zhuangtai1.push(item.title)
						})
					}
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			tanchuaung_nr:function(data){
				// this.xiayibu()
				this.$post('buse/fxjBuse_02/addFxjBuseitem_09',{
					rid:this.dat_arr.id,
					query02:this.zhuangtai1[this.index],
					query03:data.spyj,
					query05:data.nbyj
				}).then((res)=>{
					console.log(res.data,7777)
					if(res.data.success){
						this.tc_tijiao = false;
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
							    delta: 2
							});
						},1000)
					}else if(!res.data.success){
						uni.showToast({
							title: res.data.message,
							icon:'none'
						})
					}
				})
			},
			tanchuaung_gb:function(data){
				this.tc_tijiao = false;
			},
			tz:function(e){
				let szm
				console.log(this.zhuangtai1[this.index])
				this.zhuangtai.forEach((item)=>{
					// console.log(item,this.zhuangtai1[this.index],100000)
					if(item.text == this.zhuangtai1[this.index]){
						this.a2 = item.value
						szm = item.text
					}
				})
				this.pinfen.pop()
				let a = new Array(this.pinfen);
				let b = a.join(",");
				this.pinfen.push('../../static/80.png')
				this.$put('buse/fxjBuse_02/edit',{
					id:this.dat_arr.id,
					query15:this.a1,//评分
					// query16:this.a2,//审批状态
					// query17:szm,
					query20:b,//审批附件
					query19:this.a3,//备注
					
				}).then((res)=>{
					if(res.data.success){
						if(e == 1){
							uni.showToast({
								title:'保存成功',
								icon:'none'
							})
						}else if(e == 2){
							this.tc_tijiao = true
						}
						
					}
				})
			},
			orcStatus:function(e){
				this.status = e
			},
			ocr:function(){
				this.status = 1
			}
		}
	}
</script>

<style>
	.active_img{
		
	}
	.zhezhao>image,.zhezhao1>image{
		width: 35rpx;
		height: 35rpx;
	}
	.zhezhao{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.zhezhao1{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.w_fot3{
		margin-right: 20rpx;
	}
	.w_fot4{
		padding: 4rpx 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #0F77FE;
		color: #0F77FE;
		border-radius: 8rpx;
	}
	.w_fot2{
		display: flex;
		justify-content: space-between;
	}
	.box4>view>image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.box4>view{
		width: 316rpx;
		height: 211rpx;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:#666666;
		margin-bottom: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 10;
	}
	.box4{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.w_fot1{
		margin: 20rpx 0;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0,0,0,1);
	}
	textarea{
		width: 100%;
		border: 1px solid #ececec;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	.btn_all{
		margin-bottom: 30rpx;
	}
	.xing{
		width: 15rpx;
		height: 15rpx;
		margin-right: 10rpx;
	}
	.img_box1>image{
		width: 100%;
		height: 220rpx;
		margin-bottom: 30rpx;
	}
	.img_box1{
		width: 48%;
		text-align: center;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
	}
	.img_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.s_box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 30rpx 0;
		
	}
	.g_fot1{
		color: rgba(5, 106, 255, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}
	.box3_2{
		background:rgba(66,134,245,1);
		border-radius:10rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		border:1px solid rgba(66,134,245,1);
	}
	.box3_1{
		border:1px solid rgba(66,134,245,1);
		border-radius:10rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(66,134,245,1);
	}
	.box3>view{
		width: 48%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.box3{
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		align-items: auto;
		margin: 40rpx 0;
	}
	.box2>input{
		text-align: right;
		font-size:30rpx;
	}
	.box2{
		height:88rpx;
		background:rgba(250,250,250,0.3);
		border:1px solid rgba(230,230,230,1);
		border-radius:10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(0,0,0,1);
		margin-top: 20rpx;
	}
	.zxj>image{
		width: 100%;
		height: 100%;
	}
	.zxj{
		width: 37rpx;
		height: 32rpx;
	}
	.fot3{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(244,48,48,1);
	}
	.fot2{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		margin-bottom: 19rpx;
	}
	.box1{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fot1{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		margin-bottom: 13rpx;
	}
	.bigbox{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>
